<template>
  <el-container>
    <!-- 左侧导航栏 -->
    <el-aside :style="asideStyle">
      <!-- 将routes传给 Navbar组件的menus属性 -->
      <Navbar :menus="routes" :collapse="isCollapse"></Navbar>
    </el-aside>

    <!-- 右侧主要区 -->
    <el-container>
      <!-- //头部区域 -->
      <el-header>
        <!-- 添加图标 -->
        <div
          :style="iconStyle"
          class="spinner spinner__1 icon"
          :class="iconDeg"
          @click="handleCollapse"
          onmouseover="div1.style.display='block'"
          onmouseout="div1.style.display='none'"
        ></div>

        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/hd' }"
            >活动管理</el-breadcrumb-item
          >
        </el-breadcrumb>

        <el-dropdown>
          <span class="el-dropdown-link">
            {{ currentUser }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>用户信息</el-dropdown-item>

            <!-- click.native是给组件绑定原生事件 -->
            <el-dropdown-item @click.native="handleLogout"
              >注销</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <span id="div1" v-if="isCollapse">展开</span>
      <span id="div1" v-else>折叠</span>

      <!-- 中间主要内容显示区 -->
      <el-main>
        <router-view />
      </el-main>

      <!-- 底部 -->
      <el-footer> Copyright © 2021-2021 老景 版权所有 </el-footer>
    </el-container>
  </el-container>
</template>
 
<script>
import r from "../router/routes";
import Navbar from "./Navbar";
import { clearToken, getCurrentUser } from "../Utils/auth";

export default {
  data() {
    return {
      //当前用户
      currentUser: "",

      //定义是否折叠
      isCollapse: false,
      show: true,
    };
  },
  methods: {
    //定义图标单击事件
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.show = !this.show;
      console.log("是否折叠：" + this.isCollapse);
    },

    //点击注销时
    handleLogout() {
      this.$confirm("确定要注销嘛?", "注销", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "注销成功!",
          });

          //删除accessToken和refreshToken的本地储存，并跳转到登录页
          clearToken();

          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销",
          });
        });
    },
    //定义fullPath函数用于获取组件对应完整路由
    fullPath(ArrPath, parentPath = "") {
      var newArr = [];

      //遍历ArrPath数组
      ArrPath.map((route) => {
        // 判断当前路由最后一个字符是否为 '/'
        parentPath =
          parentPath.lastIndexOf("/") !== parentPath.length - 1
            ? parentPath + "/"
            : parentPath;

        // Object.assign方法用于对象的合并，
        // 将router添加到{}  并赋给obj对象中

        let obj = Object.assign({}, route);

        //获取当前路由的全路由（+父级路由）
        obj.path = parentPath + obj.path;

        // console.log(obj.path);

        //判断当前路由组件还有没有children节点,并且组件里有东西
        if (obj.children && obj.children.length > 0) {
          obj.children = this.fullPath(obj.children, obj.path);
        }

        //判断当前组件的元数据下是否有hidden属性 并且为true
        if (obj.meta.hidden) {
          if (obj.children && obj.children.length > 0) {
            //  遍历子元素
            obj.children.forEach((child) => {
              var temp = Object.assign({}, child);
              //并将子元素添加到newArr中，与父组件同级
              newArr.push(temp);
            });
          }
        } else {
          //将当前路由添加newArr,添加不能只添加路由要把整个对象添加进去
          newArr.push(obj);
        }
      });

      //  obj["/","/system","/home","/login","/system/user"..."/system/sure/sds"]

      //处理上级路由，返回的路由结构要和'r'一样
      return newArr;
    },
  },
  components: {
    Navbar: Navbar,
  },
  computed: {
    routes() {
      return this.fullPath(r);
    },
    asideStyle() {
      return {
        //如果isCollapse为true表示折叠
        width: this.isCollapse ? "auto" : "200px",
      };
    },
    //定义图标的样式
    iconStyle() {
      return {
        animation: this.isCollapse ? "" : "spin 2s linear infinite",
      };
    },
    //給图标动态绑定的class
    iconDeg() {
      return {
        "icon-deg": this.isCollapse ? true : "",
      };
    },
  },
  mounted() {
    
    var user = getCurrentUser();
    this.currentUser = user;
    console.log("当前用户：" + user);
  },
};
</script>

<style>
@import "../assets/css/base.css";

.el-header,
.el-footer {
  background-color: lightblue;
  /* border-block: 1px pink ; */
  /* text-align: center; */
  line-height: 60px;
  /* 左右居中 */
  /* justify-content: center; */
}

.el-header {
  /* 弹性布局，不会换行 */
  display: flex;
  /* 垂直水平居中 */
  align-items: center;

  justify-content: space-between;
}

.el-footer {
  text-align: center;
  color: #000;
}

.el-main {
  /* background-color: #1c924d; */
  background-image: url(../assets/img/bj001.jpg);
  text-align: center;
  padding: 0;
  min-height: calc(100vh - 120px);
}

body {
  /* 加上!importanrt可以覆盖父级的样式 */
  background-color: #545c64 !important;
  margin: 0px !important;
  color: #333;
}
.el-breadcrumb {
  font-size: 20px;
  line-height: 50px;
}
.icon-deg {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(-90deg);
}
#div1 {
  font-size: 5px;
  display: none;
  text-align: left;
}
.el-dropdown-link {
  cursor: pointer;
  color: black;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
